<template>
  <div>
    <div class="top_bar">
      <van-nav-bar class="vide-tobar" @click-left="sheetshow = true">
        <template #left>
          <img class="img_l" src="../../assets/icon/cam.png" alt="" />
        </template>
        <template #title>
          <div class="titel">
            <span @click="tab_1" :class="title == '关注' ? 'on' : ''"
              >关注</span
            >
            <span @click="tab_2" :class="title == '发现' ? 'on' : ''"
              >发现</span
            >
          </div>
        </template>
        <template #right>
          <img
            class="img_r"
            v-if="emailLogin != null"
            :src="iconUrl + emailLogin[0].userImg"
            alt=""
          />
          <p v-else>未登录</p>
        </template>
      </van-nav-bar>
    </div>
    <div class="hbox"></div>

    <!-- <my-vide :videoList="videoList"></my-vide> -->
    <div v-if="comShow" class="videcontent">
      <div @click="toSearch">
        <van-search disabled placeholder="请输入搜索关键词" />
      </div>

      <div class="vido_box">
        <van-tabs @change="oncange" v-model="active" swipeable animated>
          <van-tab name="1" title="全部">
            <van-list
              style="width: 100%"
              v-model="loading"
              :finished="finished"
              finished-text="没有更多了"
              @load="onLoadlist"
              :offset="20"
            >
              <div class="vide_content">
                <div
                  class="vide_item"
                  v-for="item in videoList"
                  :key="item.vidID"
                >
                  <div class="vide_top">
                    <router-link
                      :to="{ name: 'videDetail', params: { vid: item.vidID } }"
                    >
                      <div v-if="item.Cover != ''">
                        <img
                          style="border-radius: 10px"
                          v-lazy="videoUrl + item.Cover"
                          alt=""
                        />
                      </div>

                      <video v-else :src="videoUrl + item.item.Cover"></video>
                    </router-link>
                  </div>
                  <p class="vide_title">
                    <van-tag
                      style="margin-right: 6px"
                      v-if="item.MediaType == '视频'"
                      plain
                      color="#7232dd"
                      >视频</van-tag
                    >{{ item.message }}
                  </p>
                  <div class="vide_bottom">
                    <!-- 头像与昵称 -->
                    <div class="tip_l">
                      <img :src="iconUrl + item.userHeard" alt="" />
                      <span>{{ item.userName }}</span>
                    </div>
                    <!-- 点赞 -->
                    <div class="tip_r">
                      <van-icon
                        name="like-o"
                        size="18"
                        @click="likeClick"
                        :color="num ? '#F1050A' : ''"
                      />
                      <transition
                        @before-enter="beforeEnter"
                        @enter="enter"
                        @after-enter="afterEnter"
                      >
                        <span class="addOne" v-if="isLike">+1</span>
                      </transition>

                      {{ num }}
                    </div>
                  </div>
                </div>
              </div>
            </van-list>
          </van-tab>
          <van-tab
            v-for="item in typeList"
            :key="item.id"
            :name="item.id"
            :title="item.name"
          >
            <van-empty
              v-if="videotepeList.length == 0"
              image="https://sss-1306551685.cos.ap-guangzhou.myqcloud.com/MobileShop/zanwu.png"
              description="该类别暂无数据"
              style="width: 100%"
            />

            <!-- <my-list  :videoList="videoList"></my-list> -->
            <div class="vide_content">
              <div
                class="vide_item"
                v-for="item in videotepeList"
                :key="item.vidID"
              >
                <div class="vide_top">
                  <router-link
                    :to="{ name: 'videDetail', params: { vid: item.vidID } }"
                  >
                    <div v-if="item.Cover != ''">
                      <img
                        style="border-radius: 10px"
                        v-lazy="videoUrl + item.Cover"
                        alt=""
                      />
                    </div>

                    <video v-else :src="videoUrl + item.item.Cover"></video>
                  </router-link>
                </div>
                <p class="vide_title">
                  <van-tag
                    style="margin-right: 6px"
                    v-if="item.MediaType == '视频'"
                    plain
                    color="#7232dd"
                    >视频</van-tag
                  >{{ item.message }}
                </p>
                <div class="vide_bottom">
                  <!-- 头像与昵称 -->
                  <div class="tip_l">
                    <img :src="(item.userID = emailLogin[0].userID)" alt="" />
                    <span>{{ item.userName }}</span>
                  </div>
                  <!-- 点赞 -->
                  <div class="tip_r">
                    <van-icon
                      name="like-o"
                      size="18"
                      @click="likeClick"
                      :color="num ? '#F1050A' : ''"
                    />
                    <transition
                      @before-enter="beforeEnter"
                      @enter="enter"
                      @after-enter="afterEnter"
                    >
                      <span class="addOne" v-if="isLike">+1</span>
                    </transition>

                    {{ num }}
                  </div>
                </div>
              </div>
            </div>
          </van-tab>
        </van-tabs>
        <div style="height: 1.8rem" class="fbox"></div>
      </div>
    </div>

    <my-attention v-else></my-attention>

    <!-- //选项框 -->
    <van-action-sheet
      class="sheet"
      v-model="sheetshow"
      :actions="actions"
      @select="selectChange"
      cancel-text="取消"
      close-on-click-action
      @cancel="onCancel"
    />
  </div>
</template>
<script>
import Video from "../disvcove/Video.vue";
import Attention from "../disvcove/Attention.vue";
import { mapState } from "vuex";

export default {
  components: { "my-vide": Video, "my-attention": Attention },
  data() {
    return {
      comShow: true,
      checked: false,
      title: "发现",
      sheetshow: false,
      actions: [{ name: "图文分享" }, { name: "视频分享" }],
      active: "1",
      typeList: [
        { id: 2, name: "穿搭" },
        { id: 3, name: "家具" },
        { id: 4, name: "数码" },
        { id: 5, name: "美食" },
        { id: 6, name: "美妆" },
        { id: 7, name: "科技" },
        { id: 8, name: "生活" },
      ],
      loading: false,
      finished: false,
      videoList: [],
      videotepeList: [],
      totol: 0,
      page_num: 0,
      start: 1,
      num: "22", //点赞数
      isLike: false,
    };
  },
  mounted() {
    // this.GetAllvideoList();
  },
  activated() {
    // this.GetAllvideoList();
  },
  created() {},
  methods: {
    tab_1() {
      this.comShow = false;
      this.title = "关注";
    },
    tab_2() {
      this.comShow = true;

      this.title = "发现";
    },
    onCancel() {
      console.log("dsada");
    },
    selectChange(val) {
      console.log(val.name);
      if (val.name == "图文分享") {
        this.$router.push("/ImgShare");
      }
      if (val.name == "视频分享") {
        this.$router.push("/videoShare");
      }
    },
    async GetAllvideoList() {
      const { data: res } = await this.$http.get("Getvideo", {
        params: { page_num: this.page_num, page_size: 10 },
      });
      // console.log(res);
      if (res.status !== 200) return this.$toast("数据加载失败");
      if (res.status == 200) {
        this.loading = false;

        if (res.data.length) {
          this.videoList.push(...res.data);
          this.totol = res.paging.total;
        } else {
          this.finished = true;
        }
      }
    },
    onLoadlist() {
      this.page_num += 1;
      setTimeout(() => {
        this.GetAllvideoList();
      }, 100);
    },
    oncange(name, title) {
      console.log(title);
      this.selectVideolist(title);
    },
    async selectVideolist(title) {
      const { data: res } = await this.$http.get("queryVideolist", {
        params: { type: title },
      });
      console.log(res);
      this.videotepeList = res.data;
    },
    toSearch() {
      this.$router.push("/SearchVideo");
    },
    beforeEnter(el) {
      //动画开始进入前
      el.style.transform = "translate(0,0)";
    },
    enter(el, done) {
      //动画执行时
      el.offsetWidth;
      el.style.transform = "translate(5px,-20px)";
      el.style.transition = "all 0.6s ease";
      done();
    },
    afterEnter(el) {
      //动画结束时
      this.isLike = !this.isLike;
    },
    likeClick() {
      this.isLike = true;
      this.num++;
    },
  },
  computed: {
    ...mapState(["emailLogin"]),
  },
};
</script>

<style lang="less" scoped>
.vnten {
  background-image: -moz-linear-gradient(
    135deg,
    rgba(255, 26, 0, 0.05),
    rgb(205, 254, 236)
  );

  background-image: -webkit-linear-gradient(
    135deg,
    rgba(255, 26, 0, 0.05),
    rgb(205, 254, 236)
  );

  background-image: linear-gradient(
    135deg,
    rgba(255, 26, 0, 0.05),
    rgb(205, 254, 236)
  );
}
.top_bar {
  position: fixed;
  width: 100%;
  max-width: 640px;
  top: 0;
  background: #fff;
  z-index: 1500;
  border-bottom: 1px solid #eee;
  img {
    width: 30px;
    height: 30px;
  }
  .img_r {
    border: 1px solid #fff;
    border-radius: 50%;
  }
  .titel {
    width: 100px;
    align-items: center;
    display: flex;
    justify-content: space-around;
    span {
      font-size: 1rem;
    }
    .on {
      font-size: 1.1rem;
      font-weight: bold;
    }
  }
}
.sheet {
  z-index: 999999 !important;
}
.videcontent {
  background: #fff;
}
.vido_box {
  //   border: 1px solid red;
  //   padding: 10px;
}
.vide_content {
  overflow: hidden;
  column-count: 2;
  .vide_item {
    width: 100%;
    -moz-column-break-inside: avoid;
    break-inside: avoid;
    box-sizing: border-box;
    padding: 5px;
    /* margin: 5px; */
    margin-bottom: 10px;
    box-shadow: 1px 2px 5px 2px #eaeaea;
    background: white;
    border-radius: 10px;
  }
  .vide_top {
    // background: black;
    border-radius: 10px;
    video {
      width: 100%;
      height: 100%;
      border-radius: 10px;
    }
  }
  .vide_title {
    height: 2.2rem;
    font-size: 0.9rem;
    padding-top: 0.5rem;
    color: #1a1a1a;
    line-height: 1.3rem;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    padding: 6px;
    /* padding-bottom: 12px; */
    margin-bottom: 10px;
  }
  .vide_bottom {
    margin-bottom: 26px;
    padding: 1px;
  }
  .tip_l {
    float: left;
    display: flex;
    align-items: center;
    img {
      width: 25px;
      height: 25px;
      border-radius: 50%;
    }
    span {
      margin-left: 3px;
    }
  }
  .tip_r {
    margin-top: 5px;
    float: right;
    display: flex;
    align-items: center;
    .van-rate {
      width: 20px;
      height: 20px;
      border-radius: 50%;
    }
    span {
      margin-left: 3px;
      color: #bcbbbb;
    }
  }
}
</style>